<template>
  <div class="wrap">
    <nuxt-link to="/personal-center/message/all" tag="p" v-html="info.msgContent"
      @click="handleRead"
      :style="{color: fontColor}"
    ></nuxt-link>
  </div>
</template>

<script>
export default {
  name: "alertsContent",
  props: {
    info: Object
  },
  data(){
    return{
      fontColor: '#333'
    }
  },
  created() {
    // 消息已经被读过
    if (this.info.isRead){
      this.fontColor = '#AAA';
    }
  },
  methods:{
    handleRead(){ // 消息没有被读过
      if (this.fontColor !== '#AAA'){
        this.fontColor='#00AAE6';
        this.$emit('read', this.info.content);
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .wrap{
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
  }
  a{
    color: #00AAE6 !important;

  }
p{
  box-sizing: border-box;
  margin: 0 16*$length;
  border-bottom:1px dashed #EFEFEF;
  @extend %animate-transition;
  @extend %cursorPointer;
  @include fontStyle(12,43,500,#333,left);
  @extend %nowrap;

  &:hover{
    color: #00AAE6 !important;
  }
}
</style>
